<%--
  Created by IntelliJ IDEA.
  User: Ren
  Date: 2022/10/23
  Time: 20:06
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>用户预约界面</title>

    <!--引入elementui得样式-->
    <link type="text/css" rel="stylesheet" href="/css/index.css"/>
    <link type="text/css" rel="stylesheet" href="/css/moregood.css"/>

    <!--引入vue得依赖必须再elementui之前引入vue-->
    <script type="text/javascript" src="/js/vue.js"></script>
    <script type="text/javascript" src="/js/index.js"></script>
    <script type="text/javascript" src="/js/axios.min.js"></script>
    <script type="text/javascript" src="/js/qs.min.js"></script>
    <style>
        .el-table__body {
            position: relative;
            left: 110px;
        }

        .el-table__header {
            position: relative;
            left: 110px;

        }

        .el-table__header-wrapper {
            background-color: #042831;
        }

        .el-table__body-wrapper {
            background-color: #042831;
        }

    </style>

</head>
<body>
<div id="app">
    <div>
        <template>
            <el-table
                    :data="tableData"
                    style="width: 100%"

                    :cell-style="styleBack"
                    :header-cell-style="getRowClass"

            >

                <el-table-column
                        prop="dHeadurl"
                        width="200"
                        label="头像">
                    <template slot-scope="scope">
                        <img :src="scope.row.dHeadurl" width="80" height="80">
                    </template>
                </el-table-column>


                <el-table-column
                        label="医生姓名"
                        width="280">
                    <template slot-scope="scope">
                        <el-popover trigger="hover" placement="top">
                            <p style="background-color: #042831;color: #32CD99;">学历: {{ scope.row.dEducation }}</p>
                            <p style="background-color: #042831;color: #BC8F8F;">主治: {{ scope.row.dMajor }}</p>
                            <p style="background-color: #042831;color: #238E68;">科室: {{ scope.row.tName }}</p>
                            <p style="background-color: #042831;color: #CC3299;">部门: {{ scope.row.deptName }}</p>
                            <div slot="reference" class="name-wrapper">
                                <el-tag size="medium">{{ scope.row.dName }}</el-tag>
                            </div>
                        </el-popover>
                    </template>
                </el-table-column>

                <el-table-column
                        label="年龄"
                        width="160"
                        prop="dAge">

                </el-table-column>

                <el-table-column
                        label="性别"
                        width="160"
                        prop="sex">

                </el-table-column>


                <el-table-column
                        prop="dStatus"
                        label="医生状态"
                        width="200">
                    <template slot-scope="scope">
                        <el-tag size="medium" type="danger" v-if="scope.row.dStatus == 0">离职</el-tag>
                        <el-tag size="medium" type="success" v-else-if="scope.row.dStatus == 1">在职</el-tag>
                        <el-tag size="medium" v-else>暂未入职</el-tag>

                    </template>
                </el-table-column>

                <el-table-column label="操作"
                                 width="200"
                >
                    <template slot-scope="scope">
                        <el-button
                                type="primary"
                                size="mini"
                                @click="handleEdit(scope.$index, scope.row)">去预约
                        </el-button>

                    </template>
                </el-table-column>


            </el-table>
        </template>
    </div>

    <el-drawer
            title="医生时间表"
            :visible.sync="table"
            direction="rtl"
            size="72%">
        <el-table :data="gridData">
            <el-table-column property="sNum" label="可预约的数量" width="150">
                <template slot-scope="scope">
                    <el-tag type="success">{{scope.row.sNum }}</el-tag>

                </template>
            </el-table-column>
            <el-table-column property="sPrice" label="单次价格" width="150">
                <template slot-scope="scope">
                    <el-tag type="success">{{scope.row.sPrice }}</el-tag>

                </template>
            </el-table-column>

            <el-table-column property="sStatus" label="状态">
                <template slot-scope="scope">

                    <el-tag size="small" v-if="scope.row.sStatus == 1">可以预约</el-tag>
                    <el-tag size="small" v-else-if="scope.row.sStatus == 0" style="color: red">不可预约</el-tag>

                </template>

            </el-table-column>

            <el-table-column property="sDate" label="日期">

            </el-table-column>

            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                            type="primary"
                            size="mini"
                            @click="bingqing(scope.row)">填写病情
                    </el-button>

                </template>
            </el-table-column>


        </el-table>
    </el-drawer>


    <el-dialog
            title="提示"
            :visible.sync="dialogVisible"
            width="30%">
        <span>该医生还没到上班时间，请稍后</span>
        <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">确定</el-button>

  </span>
    </el-dialog>


    <el-dialog title="病情" :visible.sync="dialogFormVisible1">
        <el-form :model="form">

            <el-form-item label="病情描述" :label-width="formLabelWidth">
                <el-input v-model="form.cCases" autocomplete="off"></el-input>
            </el-form-item>


        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible1 = false">取 消</el-button>
            <el-button type="primary" @click="tijiao()">确 定</el-button>
        </div>
    </el-dialog>


    <el-drawer
            title="病人信息"
            :before-close="handleClose"
            :visible.sync="dialog"
            direction="ltr"
            custom-class="demo-drawer"
            ref="drawer"
    >
        <div class="demo-drawer__content">


            <el-form :model="form1">

                <el-form-item label="患者身份证号" :label-width="formLabelWidth">
                    <el-input v-model="form1.mIdcard" autocomplete="off"></el-input>
                </el-form-item>

                <el-form-item label="患者手机号" :label-width="formLabelWidth">
                    <el-input v-model="form1.mTelephone" autocomplete="off"></el-input>
                </el-form-item>

                <el-form-item label="患者年龄" :label-width="formLabelWidth">
                    <el-input v-model="form1.mAge" autocomplete="off"></el-input>
                </el-form-item>

                <el-form-item label="患者性别" :label-width="formLabelWidth">
                    <el-select v-model="form1.mSex" placeholder="请选择性别" style="width: 100%">

                        <el-option :data="sexs"
                                v-for="(item,key) in sexs"
                                   :key="key"
                                   :label="item.label"
                                   :value="key"
                        ></el-option>


                    </el-select>
                </el-form-item>
                <el-form-item label="患者预约费用" :label-width="formLabelWidth">
                    <el-tag type="success" v-model="form1.mPrice">{{form1.mPrice}}</el-tag>

                </el-form-item>


            </el-form>

            <div class="demo-drawer__footer">
                <el-button @click="cancelForm">取 消</el-button>
                <el-button type="primary" @click="$refs.drawer.closeDrawer()" :loading="loading">{{ loading ? '提交中 ...'
                    : '确 定' }}
                </el-button>
            </div>
        </div>
    </el-drawer>


</div>

</body>

<script>
    let app = new Vue({
        el: '#app',
        data: {

            dialog: false,
            loading: false,


            tableData: [],
            table: false,
            gridData: [],
            dialogVisible: false,
            dialogFormVisible1: false,
            form: {},
            form1: {},

            bingliid: 0,


            Num: {},

            //主要定义性别
            sexs:[
                {value: '0', label:'女'},
                {value: '1', label:'男'}
            ]
        },
        created() {

            this.intoTable();

        },

        methods: {


            bingqing(row) {
                this.dialogFormVisible1 = true;
                this.form.cDate = row.sDate
                this.form1.mPrice = row.sPrice
                console.log(row)
                this.form1.mNum = row.sNum

                this.Num.sDate = row.sDate
                axios.post("/scheduling/jianshuliang", this.Num).then(resp => {

                })

            },
            tijiao() {
                axios.post("/condition/add", this.form).then(resp => {
                    this.dialogFormVisible1 = false;
                    this.dialog = true;
                    this.bingliid = resp.data.data.cId
                    console.log(this.bingliid)

                })
            },

            intoTable() {

                axios.get("/doctor/ds").then(resp => {
                    this.$message.success("初始化信息成功")
                    this.tableData = resp.data.data
                })
            },


            handleEdit(index, row) {
                console.log(index, row);
                this.table = true;

                axios.get("/scheduling/selectone?sDid=" + row.dId).then(resp => {
                    this.gridData = resp.data.data

                    if (this.gridData.length == 0) {
                        this.dialogVisible = true
                        this.table = false;
                    }

                })


            },

            handleClose(done) {
                if (this.loading) {
                    return;
                }
                this.$confirm('确定要提交表单吗？')
                    .then(_ => {
                        this.loading = true;


                        console.log(done)

                        console.log(this.form1)
                        window.open("http://localhost:8080//AliPay//Pay?" +
                            "mIdcard=" + this.form1.mIdcard +
                            "&mTelephone=" + this.form1.mTelephone +
                            "&mSex=" + this.form1.mSex +
                            "&mAge=" + this.form1.mAge +
                            "&mPrice=" + this.form1.mPrice +
                            "&cId=" + this.bingliid +
                            "&mNum=" + this.form1.mNum)


                        this.timer = setTimeout(() => {
                            done();
                            // 动画关闭需要一定的时间
                            setTimeout(() => {
                                this.loading = false;
                            }, 400);
                        }, 2000);
                    })
                    .catch(_ => {
                    });
            },
            cancelForm() {
                this.loading = false;
                this.dialog = false;
                clearTimeout(this.timer);
            },

            // 表格奇偶层样式
            styleBack({row, column, rowIndex, columnIndex}) {
                if ((rowIndex + 1) % 2 === 0) {
                    return "background:#053c4a; color:#fff;border:1px solid #053c4a";
                } else {
                    return "background:#042831; color:#fff;border:1px solid #042831";
                }
            },
            // 表头样式
            getRowClass({rowIndex}) {
                return "background:#053c4a; color:#fff;border:3px solid #053c4a";
            },


        }


    })
</script>

</html>
